<template>
    <basic-container>
        <avue-crud :option="option" :data="data" ref="crud" v-model="form" :table-loading="loading"
                   :permission="permissionList" :page="page" @row-del="rowDel"
                   @refresh-change="refreshChange"
                   @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
                   @size-change="sizeChange"
                   @on-load="onLoad">
            <template slot="search">
                <el-col  :span="12">
                    <el-form-item label="直播开始时间"label-width="100px" style="display: inline-block;width: 50%;">
                        <el-date-picker placeholder="开始时间" value-format="yyyy-MM-dd" v-model="beginStartTime" type="date" size="small">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="至"　label-width="40px" style="display: inline-block;width: 50%;">
                        <el-date-picker placeholder="结束时间" @change="getTime" value-format="yyyy-MM-dd" v-model="endStartTime" type="date" size="small">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </template>
            <template slot-scope="{row,type,size}" slot="menu">
                <el-button :type="type" :size="size" icon="el-icon-thumb" @click="watchLive(row)"
                           v-has="'/mall-cloud-live/room/watchLive'">观看直播
                </el-button>
                <el-button :type="type" :size="size" icon="el-icon-thumb" @click="viewComment(row)"
                           v-has="'/mall-cloud-live/room/viewComment'">查看评论
                </el-button>
            </template>
        </avue-crud>
        <el-dialog title="观看直播" :visible.sync="box" width="90%">

        </el-dialog>
        <el-dialog title="查看评论" :visible.sync="box" width="90%">

        </el-dialog>
    </basic-container>
</template>

<script>
    import {
        getListdata,
        remove
    } from "@/api/base/room/room";

    import {
        mapGetters
    } from "vuex";

    //1直播中 2直播结束
    var LIVE_STATUS = [
        {
            label: '直播中',
            value: 1,
        }, {
            label: '直播结束',
            value: 2,
        }
    ]

    export default {
        data() {
            return {
                form: {},
                tempData: {},
                query: {},
                loading: true,
                isDisabled: false,
                beginStartTime: '',
                endStartTime: '',
                box: false,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                option: {
                    size: 'mini',
                    excelBtn: false,
                    tip: false,
                    border: true,
                    index: true,
                    selection: false,
                    addBtn: false,
                    editBtn:false,
                    viewBtn: false,
                    searchBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    height: 'auto',
                    dialogType: 'dialog',
                    rowKey: 'id',
                    menuWidth: 300,
                    align: 'center',
                    searchMenuSpan: 6,
                    column: [
                        {
                            label: "ID",
                            prop: "id",
                            fixed: true,
                            span: 24
                        },
                        {
                            label: "直播标题",
                            prop: "title",
                            fixed: true,
                            rules: [{
                                required: true,
                                message: "请输入直播标题",
                                trigger: "blur"
                            },
                                {max: 10, message: '输入长度不得多于10个长度', trigger: 'blur'},
                            ]
                        },
                        {
                            label: "主播昵称",
                            prop: "streamerName",
                            fixed: true,
                            rules: [{
                                required: true,
                                message: "请输入主播昵称",
                                trigger: "blur"
                            },
                                {max: 10, message: '输入长度不得多于10个长度', trigger: 'blur'},
                            ]
                        },
                        {
                            label: "开始时间",
                            prop: "startTime",
                            fixed: true,
                            rules: [{
                                required: true,
                                message: "请输入开始时间",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "结束时间",
                            prop: "endTime",
                            fixed: true,
                            rules: [{
                                required: true,
                                message: "请输入结束时间",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "状态",
                            prop: "status",
                            search: true,
                            type: 'select',
                            width: 70,
                            dicData: LIVE_STATUS,
                        },
                    ]
                },
                data: []
            }
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList() {
                return {
                    delBtn: this.vaildData(this.permission["/mall-cloud-live/room/delete"], false)
                };
            },
        },
        methods: {
            handleClick(tab) {
                this.beginStartTime = '';
                this.endStartTime = '';
            },
            rowDel(e) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(e.id);
                    })
                    .then(() => {
                        if (this.data.length == 1) {
                            this.page.currentPage -= 1
                        }
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });

            },
            setCurrent() {
                let tempResource = [];
                this.resourceKeys.forEach(resid => {
                    this.resourceTableData.forEach(row => {
                        if (row.resourceId === resid) {
                            tempResource.push(row);
                        }
                    });
                });
                //设置选中的行
                this.$refs.crud_res.toggleSelection(tempResource);
            },
            selectionChange(data) { //选中的数据
                this.resourceTableData.forEach(row => {
                    this.resourceKeys = this.arrayRemoveKey(this.resourceKeys, row.resourceId);
                });
                data.forEach(row => {
                    this.resourceKeys.push(row.resourceId);
                });

            },
            handleClose(done) {
                location.reload();
            },
            watchLive(row) { //观看直播

            },
            viewComment(row) { //查看评论

            },
            searchReset() {
                this.query = {};
                this.beginStartTime = ''
                this.endStartTime = ''
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.page.currentPage = 1;
                params.beginStartTime = this.beginStartTime;
                params.endStartTime = this.endStartTime;
                this.query = params;
                this.onLoad(this.page, params, done);
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page);
            },
            onLoad(page, params = {}, done) { //页面初始化请求管理员列表
                this.loading = true;
                getListdata(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if (done) {
                        done();
                    }
                    this.res = false;
                    const data = res.data;
                    this.page.total = data.count;
                    this.data = data.data
                    this.loading = false;
                });
            },
            getTime() {
                if (this.beginStartTime > this.endStartTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.endStartTime = ''
                }
            }
        }
    };
</script>
